<template>
    <div class="form-content">
        
        <el-form ref="form" :model="form" :rules="rules" label-width="110px" :disabled="type == 'detail' ? true : false">
            <el-row :gutter="20">
                
                <el-col :span="24">
                    <el-form-item  label="音色名称" prop="name">
                        <el-input  v-model="form.name" placeholder="请输入音色名称"  />
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="type == 'add' || type == 'detail'">
                    <el-form-item  label="训练音频地址" prop="trainingAudioUrl">
                        <fileUpload v-model="form.trainingAudioUrl" :limit="1" :isJson="false" accept=".mp3,.wav,.wma,.ape,.flac,.ogg,.aac" :fileSize="15"/>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="(type == 'add' || type == 'detail') && form.trainingAudioUrl">
                    <el-form-item  label="试听" >
                        <audio ref="audio" :src="form.trainingAudioUrl"  controls style="height: 30px;width:150px" ></audio>
                    </el-form-item>
                </el-col>
                 <el-col :span="24">
                    <el-form-item label="音色质量" prop="supplierType">
                        <el-select v-model="form.supplierType" clearable >
                            <el-option label="低质量" :value="1">低质量</el-option>
                            <el-option label="高质量" :value="4">高质量</el-option>

                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="标签" prop="tags">
                        <el-select
                            v-model="form.tags"
                            placeholder="请选择分类"
                            clearable
                        >
                            <el-option 
                                v-for="dict in dict.type.system_timbre_type" 
                                :label="dict.label" 
                                :key="dict.value" 
                                :value="dict.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24" >
                    <el-form-item  label="备注" prop="remark">
                        <el-input  v-model="form.remark" placeholder="请输入备注"  />
                    </el-form-item>
                </el-col>
               
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="type != 'detail'" >
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </div>
</template>
<script>
import {submitAudioModelTrainning,detailAudioModel,editAudioModelNameAndTags} from '@/api/materialManage/index.js'
export default{
    dicts: ['system_timbre_type'],
    props: {
        id: {
            type:[Number,String],
            default: ''
        },
        type: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            
            form: {
                modelType: 1,
            },
            rules: {
                name: [
                    { required: true, message: "音色名称不能为空", trigger: "blur" }
                ],
                trainingAudioUrl: [
                    { required: true, message: "训练音频不能为空", trigger: "blur" }
                ],
                tags: [
                    { required: true, message: "分类不能为空", trigger: "blur" }
                ],
                supplierType: [
                     { required: true, message: "音色质量不能为空", trigger: "blur" }
                ]
                
               
            },
        }
    },
    created() {
        if(this.id) {
            this.getDetail()
        }
    },
    methods: {
        getDetail() {
            detailAudioModel({aiPersonAudioModelId: this.id}).then(res => {
                this.form = res.data
                this.form.tags = Number(this.form.tags)
            })
        },
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if(this.id) {
                        console.log(this.form,'form')
                        let  jsons = {
                            aiPersonAudioModelId: this.form.aiPersonAudioModelId,
                            name: this.form.name,
                            remark: this.form.remark,
                            tags: this.form.tags
                        }
                        console.log(jsons,'jsons')
                        editAudioModelNameAndTags(jsons).then(res => {
                            this.$modal.msgSuccess(res.msg)
                            this.$emit('success','')
                        })
                    }else{
                        submitAudioModelTrainning(this.form).then(res => {
                            this.$modal.msgSuccess(res.msg)
                            this.$emit('success','')
                        })
                    }
                    
                }
            })
        },
        cancel() {
            this.$emit('close','')
        }
    }
}
</script>
